import React, { useState } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponIndex.scoped.css'

const Component = () =>
{
  let [active, SetActive] = useState('all')
  let [couponlist,setCouponList] = useState([])

  //初始显示
  React.useEffect(()=>{
    TabChange()
  },[])
  //页面显示

  //选项卡切换 根据选项卡上面的值去改变
  const TabChange = async (key: string) => {
    let busid = React.business.id ?? 0;
    var result = await React.request.post('/business/coupon',{key,busid});
    if(result.code == 0){
      // React.toast(result.msg,null,'fail');
      // return false
    }
    setCouponList(result.data)
    SetActive(key)
  }
  const CouponList = ()=>{
    if(couponlist.length<=0){
      return(<><React.UI.AutoCenter>暂无优惠券...</React.UI.AutoCenter></>)
    }
    return(
      <div className="coupon_list">
        {
          couponlist.map((item, index)=>{
              return(
                <div className="coupon_item" key={index}>
                  <div className="item_content">
                      <Link to="/coupon/info" state={{cid:item.coupon.id,id:item.id}}>
                          <div className="left">
                              {item.coupon.rate*100}<span>折</span>
                          </div>
                          <div className="right">
                              <div>新店优惠券</div>
                              <div>订单满<span>100元</span>打<span>{item.coupon.rate*100}折</span></div>
                              <div>剩余{item.coupon.total}</div>
                              <div>{item.coupon.endtime_text}</div>
                          </div>
                      </Link>
                  </div>
                  <div className="item_btn">
                    {item.status==1 ? <React.UI.Button color='primary' fill='solid' size='small'>立即使用</React.UI.Button> : <React.UI.Button color='danger' disabled fill='solid' size='small'>已使用</React.UI.Button>}
                    
                    {/*  disabled=true */}
                  </div>
                </div>
              )
          })
        }
        
      </div>
    )
  }
  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未使用" key="1" />
        <React.UI.Tabs.Tab title="已使用" key="0" />
      </React.UI.Tabs>
      {/* 优惠券列表 */}
      <CouponList />
      <Menu />
    </>
  )
}

export default Component